*{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    background:url("turntable-1109588_1920.jpg");
}
.main{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    animation: change 5s linear infinite;
}
@keyframes change{
    0%{
        filter:hue-rotate(0deg);
    }
    100%{
        filter:hue-rotate(360deg);
    }
}
.main span{
    position:absolute;
    width:30px;
    height:150px;
    background:#3498db;
    left:calc(40px * var(--s) - 40px);
    bottom:0;
    box-shadow:0 0 5px #3498db,
               0 0 20px #3498db,
               2px 2px 5px black;
    animation:jump 2s linear infinite calc(0.4s * var(--s));
}
@keyframes jump{
    50%{
        height:0px;
    }
}
.main p{
    position:absolute;
    bottom:-50px;
    font-size:35px;
    overflow: hidden;
    color:#3498db;
    text-shadow: 2px 2px 5px black;
    animation:load 3s linear infinite;
}
@keyframes load{
    0%{
        width:0;
    }
    66%,100%{
        width:190px;
    }
}